<template>
    <div>
        <div> 其他更新 </div>
        <!-- 1/2 -->
        <template v-for="(item, index) of list" v-if="list.length" :key="index">
            <span>{{ item }}</span>
        </template>
        <!-- 3 -->
        <div id="blue" class="test" v-bind="{ id: 'red', class: 'bind-test' }">red</div>
        <div v-bind="{ id: 'red', class: 'bind-test' }" id="blue" class="test">blue</div>
        <!-- 4 -->
        <div v-for="(item, index) of list" :key="index" :ref="onSetRef">{{ item }}</div>
        <!-- 6 -->
        <table>
            <tr is="vue:Temp">1</tr>
        </table>
    </div>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, onMounted, onUnmounted, reactive } from 'vue'

export default defineComponent({
    components: {
        // 5、异步组件必为defineAsyncComponent方法
        Temp: defineAsyncComponent(() => import('./temp.vue'))
    },
    setup() {
        // 1、v-for key值应该设置在template上，而不是子节点
        // 2、同一节点v-if优先级高于v-for
        const list = reactive([1, 2, 3, 4])
        // 3、v-bind属性绑定顺序会影响渲染结果
        // 4、v-for中的ref需要手动设置
        let divRefs = reactive([])
        const onSetRef = (el) => {
            divRefs.push(el)
        }
        onMounted(() => {
            console.log(divRefs);
        })
        onUnmounted(() => {
            divRefs = []
        })
        // 6、is方法现在除了Component组件，其余需加vue:前缀
        // 7、data选项强制返回object的方法
        return {
            list,
            onSetRef
        }
    },
})
</script>
